<template>
	<scroll-view>
		<view class="maintenancedetails">
			<view class="title">
				<view class="">
					<image src="../../../../static/icons/正确.png" mode="" class="icon"></image>
				</view>
				<view class="title-names">
					您的维修申请审核中，请耐心等待
				</view>
			</view>
			<view class="item">
				<view class="title">
					<view class="icons">

					</view>
					<view class="">
						维修流程
					</view>
				</view>
				<view class="content">

				</view>
			</view>
			<view class="item">
				<view class="title">
					<view class="icons">

					</view>
					<view class="">
						报修信息
					</view>
				</view>
				<view class="content">
					<view class="content-items">
						<view class="content-name">
							报修房屋
						</view>
						<view class="content-details">
							南航碧桂园小区01栋2单元401
						</view>
					</view>
					<view class="content-items">
						<view class="content-name">
							维修项目
						</view>
						<view class="content-details">
							水暖-浴霸
						</view>
					</view>
					<view class="content-items">
						<view class="content-name">
							标题
						</view>
						<view class="content-details">
							浴霸没有水
						</view>
					</view>
					<view class="content-items">
						<view class="content-name">
							问题描述
						</view>
						<view class="content-details">


						</view>
					</view>
					<view class="content-items">
						<view class="content-name">
							手机号码
						</view>
						<view class="content-details">
							16589000078
						</view>
					</view>
					<view class="content-items">
						<view class="content-name">
							预约日期
						</view>
						<view class="content-details">
							2022/09/09
						</view>
					</view>
					<view class="content-items">
						<view class="content-name" style="width: 100%;margin-bottom: 20rpx;">
							附件
						</view>
						<view class="content-details" style="width:100%;height: 250rpx;background-color: #f3f8ff;">

						</view>
					</view>
				</view>
			</view>
			<view class="footer">
				<button class="Btn" @click="goReport" style="background-color: #006eff;color: white;">修改</button>
				<button class="Btn" @click="gobacks">撤销申请</button>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	let maintenance = ref([{
			id: 1,
			name: '提交维修申请',
			status: '提交成功',
			date: "09/09 10:30"
		},
		{
			id: 2,
			name: '审核中',
			status: '物业审核中',
			date: "09/09 10:30"
		}
	])
	const goReport = () => {
		uni.navigateTo({
			url: "/pages/server/views/FillInTheInforMation/FillInTheInforMation"
		})

	}
	const gobacks = () => {
		uni.showModal({
			title: '确认撤销此维修申请吗？'
		}).then(res => {
			if (res.confirm) {
				uni.showToast({
					title: '撤销成功'
				})
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1000)
			}
		})
	}
</script>

<style lang="scss">
	.maintenancedetails::-webkit-scrollbar {
		display: none;
	}

	.maintenancedetails {
		height: calc(100vh - 60rpx);
		background-color: #fdfeff;
		padding: 30rpx;
		padding-bottom: 300rpx;

		.footer {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			border-top: 2rpx solid #f3f4f4;
			background-color: #ffffff;
			display: flex;
			padding-top: 20rpx;
			padding-bottom: 60rpx;

			.Btn {
				width: calc(50% - 30rpx);
				font-size: 30rpx;
			}

			.Btn:nth-child(2) {
				background-color: white;
				color: #f46363;
				border: 2rpx solid #f46363;
			}
		}

		.item {
			padding: 30rpx;
			background-color: white;
			border: 2rpx solid #f2f2f2;
			margin-bottom: 30rpx;

			.title {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
			}

			.content {
				.content-items:last-child {
					border: none;
					margin: 0rpx;
				}

				.content-items {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					font-size: 28rpx;
					padding-bottom: 30rpx;
					border-bottom: 2rpx solid #f2f2f2;
					margin-bottom: 30rpx;

					.content-name {
						color: #aaaaaa;
						width: 25%;
					}

					.content-details {
						width: 75%;
					}
				}
			}



			.icons {
				width: 15rpx;
				height: 37rpx;
				background-color: #006eff;
				border-radius: 50rpx;
				margin-right: 15rpx;
			}
		}

		.title {
			text-align: center;

			.title-names {
				margin-top: 20rpx;
				margin-bottom: 60rpx;
			}

			.icon {
				width: 100rpx;
				height: 100rpx;
			}
		}

	}
</style>